<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手势追踪绘画应用</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>手势追踪绘画应用</h1>
    <p>伸出食指绘画 / 张开手掌倒计时清除</p>
    
    <button id="clear-btn">清除画布</button>
    
    <div class="container">
        <video class="input_video"></video>
        <div id="countdown-display"></div>
        <canvas class="output_canvas"></canvas>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>

    <script src="script.js"></script>
</body>
</html>